import React from 'react';
import { inject, observer } from 'mobx-react';
import { GithubPicker } from 'react-color';
import Api from '../../config'
import './header.css';
import logo from '../../logo.svg';
const searchItems = [{
    "name": "许嵩"
}, {
    "name": "周杰伦"
}, {
    "name": "薛之谦"
}, {
    "name": "王菲"
}];
@inject("MainStore")
@observer
class Header extends React.Component {

    constructor() {
        super();
        this.state = {
            GithubPickerIsShow: false
        }
    }

    handlerChangeTheme = (value) => {
        document.getElementById('root').style.setProperty("--primary-theme-color", value.hex);
        this.setState({
            GithubPickerIsShow: !this.state.GithubPickerIsShow
        })
    }

    search = (keywords) => {
        const { MainStore } = this.props;
        Api.get(Api.searchUrl, {
            keyword: keywords,
            iscorrection: 1
        }).then(res => {
            if (res.lists !== null && res.lists.length > 0) {
                MainStore.init(res);
            }
        })
    }

    render() {
        const { GithubPickerIsShow } = this.state;
        return (
            <div className="components-header">
                <img src={logo} className="logo" alt="Music" title="React Music" />
                <span className="caption">React Music</span>
                <span className="search-box">
                    <input type="input" placeholder="输入歌曲、歌手、专辑名" ref="search" className="search-input" onKeyUp={() => this.search(this.refs.search.value)} />
                    <i className="iconfont icon-search" onClick={() => this.search(this.refs.search.value)}></i>
                </span>
                <ul className="search-item">
                    {searchItems.map((item, index) => (
                        <li key={index} title={item.name} onClick={() => this.search(item.name)}>{item.name}</li>
                    ))}
                </ul>
                <ul className="header-func">
                    <li onClick={() => this.setState({ GithubPickerIsShow: !GithubPickerIsShow })}><i className="iconfont icon-pifu"></i>换肤</li>
                </ul>
                <div className={GithubPickerIsShow ? "show" : "hide"} style={{ position: "absolute", right: 20, zIndex: 99, top: 40 }}>
                    <GithubPicker triangle="top-right" onChange={this.handlerChangeTheme} />
                </div>
            </div>
        )
    }
}


export default Header;